<template>
  <div
      style="padding: 0; margin: 0; box-sizing: border-box; font-family: Arial, sans-serif; display: flex; flex-direction: column;">
    <div class="header-title"
         style="background-color: #a4c3ee;color: white;
         text-align: center;padding: 15px;font-size: 24px;
         font-weight: bold;display: flex;justify-content: center;">
      教学一体化服务平台
    </div>
    <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        style="display: flex; justify-content: space-between;"
        router
    >
      <div style="display: flex;">
        <el-menu-item index="/menu">
          <el-icon>
            <House/>
          </el-icon>
        </el-menu-item>
        <el-menu-item index="/user">个人中心</el-menu-item>
        <el-menu-item index="/order">个人订单</el-menu-item>
        <el-menu-item index="/teacher">教师预览</el-menu-item>
        <el-sub-menu>
          <template #title>课程优选</template>
          <el-menu-item index="/freeCourse">免费课程</el-menu-item>
          <el-menu-item index="/premiumCourse">精品课程</el-menu-item>
          <el-menu-item index="/LiveCourse">直播课程</el-menu-item>
        </el-sub-menu>
        <el-menu-item>教学评价</el-menu-item>
        <el-menu-item index="/notice">平台公告</el-menu-item>
      </div>
      <el-menu-item>
        <el-dropdown trigger="click">
          <span style="font-size:16px;font-weight: bold;">
            <el-icon><User/></el-icon>
            {{ user.username }}
            <el-icon><Switch/></el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
              <el-dropdown-item @click="logout">切换账号</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-menu-item>
    </el-menu>
  </div>
  <el-main style="flex: 1; display: flex; flex-direction: column;">
    <router-view/>
  </el-main>
  <el-footer style="
    background-color: #f8f9fa;
    text-align: center;
    padding: 10px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;">
    <hr>
    <el-text size="small">© 2025 达达教育有限公司 All Rights Reserved</el-text>
  </el-footer>
</template>

<script setup>
import {ref} from 'vue'
import {useRouter} from 'vue-router'

const activeIndex = ref('1')

//获取当前登录的用户数据
const user = ref(getUser());
//定义退出登录的方法
const logout = () => {
  if (confirm('您确认要退出登录吗?')) {
    //退出时要:清空本地存储+跳转至登录页+清除已取出的用户数据
    localStorage.removeItem('user');
    window.location.href = '/login';
    user.value = '';
  }
}
</script>

<style scoped>
</style>
